<template>
    <div style="text-align: left;">
        <el-form :inline="true" :model="pageHelper" class="demo-form-inline">
            <el-form-item>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
                    title="确认要删除选中订单吗！" @confirm="toggleSelection()">
                    <template #reference>
                        <el-button type="primary">删除选中</el-button>
                    </template>
                </el-popconfirm>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="pageHelper.goodsName" placeholder="请输入商品名" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="width: 100%;">
        <el-table :data="state.list" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="goodsName" label="商品名" width="160" />
            <el-table-column prop="orderPrize" label="总价" width="80" />
            <el-table-column prop="goodsType" label="商品分类" width="100" />
            <el-table-column prop="goodsPicture" label="图片" width="120">
                <template v-slot="{ row }">
                    <img :src="row.goodsPicture" alt="goodsPicture" style="width: 90px; height: 90px;">
                </template>
            </el-table-column>
            <el-table-column prop="orderAddress" label="地址" width="110" />
            <el-table-column prop="orderCount" label="数量" width="55" />
            <el-table-column prop="payTarget" label="支付状态" width="110" />
            <el-table-column prop="orderReleaseTime" label="下单时间" width="180" />
            <el-table-column label="操作" min-width="120">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">评论</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
                        title="确认要删除该订单吗！" @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button size="small" @click="toMyComments(scope.$index, scope.row)">我的评论</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="pageHelper.total" :page-size="pageHelper.pageSize"
                :current-page="pageHelper.currentPage" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute } from "vue-router"
import router from '@/router'
import { ElNotification, ElTable } from 'element-plus'
import api from '@/api'
import { InfoFilled } from '@element-plus/icons-vue'

const route = useRoute()

const pageHelper = reactive({
    goodsName: '',
    total: 10, // 总数据量
    pageSize: 5, // 每页显示的数据数量
    currentPage: 1, // 当前页码
})

const state = reactive({
    list: [] as any
})

onMounted(() => {
    // 页面加载完成后自动触发查询，假设初始页码为 1
    handleCurrentChange(1);
});


const onSubmit = () => {
    handleCurrentChange(pageHelper.currentPage)
}

function handleCurrentChange(page: number): void {
    // 更新页码
    pageHelper.currentPage = page;
    // 在这里可以根据当前页码，请求对应的数据
    // 例如：fetchData(page);
    // 发送 Axios 请求
    api.orders.getOrdersList({
        userId: route.params.userId, 
        pageNum: page,
        pageSize: pageHelper.pageSize,
        goodsName: pageHelper.goodsName
    })
        .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            pageHelper.total = response.data.data.total;
            state.list = response.data.data.list;
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
}

const goodsTypeOptions = reactive({
    goodsType: [] as any
})

// 异步请求获取下拉框选项
api.goods.getGoodsTypeList()
    .then(response => {
        goodsTypeOptions.goodsType = response.data.data;
    });

const handleEdit = (index: number, row: any) => {
    // 在这里编写编辑方法的逻辑
    // 路由跳转并传递参数
    router.push({
        name: 'commentadd', params: {
            ordersId: row.id,
            userId: row.userId,
            goodsId: row.goodsId
        }
    })
}

const toMyComments = (index: number, row: any) => {
    // 在这里编写编辑方法的逻辑
    // 路由跳转并传递参数
    router.push({
        name: 'commentsquery', params: {
            ordersId: row.id,
            userId: row.userId,
            goodsId: row.goodsId
        }
    })
}

const handleDelete = (index: number, row: any) => {
    // 在这里编写删除方法的逻辑
    api.orders.deleteOrders(row.id)
        .then(response => {
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
            // 在这里编写删除成功后的逻辑
            // 从表格中删除行数据
            handleCurrentChange(pageHelper.currentPage)
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里编写删除失败后的逻辑
        });
};

interface Forum {
    id: number,
}
const ids = ref<number[]>([]); // 存放选中行数据的 id 值数组
const toggleSelection = () => {
    if (!ids.value.length) {
        alert("请选择要删除的数据")
        return
    }
    api.orders.deleteOrdersByIds(ids.value)
        .then(response => {
            // 处理响应数据
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
            handleCurrentChange(pageHelper.currentPage)
        })
        .catch(error => {
            // 处理错误
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
        });
}
const handleSelectionChange = (val: Forum[]) => {
    ids.value = val.map(user => user.id); // 取出选中行数据的 id 值
}
</script>
  
  
<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>